//布局组件
import React from 'react'

//布局组件
import { Layout, Menu} from 'antd';
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

// 路由组件
import {Route,Link,Switch} from 'react-router-dom'
// 导入路由页面
import MovieList from './MovieList.jsx'
import MovieDetail from './MovieDetail.jsx'

export default class MovieContainer extends React.Component{
  constructor(props){
    super(props)
    this.state = {

    }
    
  }
  render(){
    return <Layout style={{height:'100%'}}>
                <Sider width={200} style={{ background: '#fff' }}>
                    <Menu
                        mode="inline"
                        defaultSelectedKeys={[window.location.hash.split('/')[2]]}
                        style={{ height: '100%', borderRight: 0 }}>
                        <Menu.Item key="in_theaters">
                            <Link to="/movie/in_theaters/1">正在热映</Link>
                        </Menu.Item>
                        <Menu.Item key="coming_soon">
                            <Link to="/movie/coming_soon/1">即将上映</Link>
                        </Menu.Item>
                        <Menu.Item key="top250">
                            <Link to="/movie/top250/1">Top250</Link>
                        </Menu.Item>
                    </Menu>
                </Sider>
                <Layout style={{ paddingLeft: '1px' }}>
                    <Content
                        style={{
                        background: '#fff',
                        padding: 10,
                        margin: 0,
                        minHeight: 280,
                        }}>
                            {/* 即使使用了路由精确匹配模式，也会从上到下把所有的路由规则匹配一遍 */}
                            <Switch>
                                {/* 使用Switch，如果前边的路由匹配到了，就不会再继续往下匹配 */}
                                <Route exact path="/movie/detail/:id" component={MovieDetail}></Route> 
                                <Route exact path="/movie/:type/:page" component={MovieList}></Route>
                                                              
                            </Switch>
                    </Content>
                </Layout>
  </Layout>

  }
}